<template>
    <div style="margin-right: 50px;">
        <span style="font-size:26px;">拖动1</span>
        <div id="onDrag" @drop="drop" @dragover="allowDrop"></div>
    <div id="drag" draggable="true" @dragstart="drag">
     请移动拖动
    </div>
    </div>

    
 </template>
 
 <script setup lang="ts">
  const drag = (e:any)=>{
     // e.dataTransfer.setData("text",e.target.innerHTML)
     e.dataTransfer.setData("text",e.target.id)
  }
  const allowDrop = (e:any)=>{
     e.preventDefault()
  }
  const drop = (e:any)=>{
     e.preventDefault();
     var data = e.dataTransfer.getData("text");
     e.target.appendChild(document.getElementById(data))
     // e.target.innerHTML = e.dataTransfer.getData("text")
  }
 </script>
 <style scoped lang="scss">
 #onDrag{
     width: 300px;
     height: 200px;
     border: 1px solid #000;
 }
 </style>
 